<!DOCTYPE html>
<html>
<head>
<script src="aes-min.js"></script>
<script src="mode-ecb-min.js"></script>
<script src="pad-nopadding-min.js"></script>
<script>
function encryptText() {
    var plain = document.getElementById("plain").value;
    console.log("plain: " + plain);
    var encrypted = encrypt(plain);
    console.log("encrypted: " + encrypted);
    document.getElementById("encrypted").value = encrypted;
}

function decryptText() {
    var encrypted = document.getElementById("todecrypt").value;
    console.log("encrypted: " + encrypted);
    var decrypted = decrypt(encrypted);
    console.log("decrypted: " + decrypted);
    document.getElementById("decrypted").value = decrypted;
}




//  加密方法
//  data：要加密的字符串
//  key：加密因子
//  iv：偏移量
function encrypt(data) {

   var keyinit = "._^BV67nW6ck8fwg";
   var ivinit = "";

    var key  = CryptoJS.enc.Utf8.parse(keyinit); // 加密因子
    var iv   = CryptoJS.enc.Utf8.parse(ivinit); // 偏移量
    var str = CryptoJS.enc.Utf8.parse(data); // 使用的字符集 uft8
    var encrypted = CryptoJS.AES.encrypt(str, key,
    {
        iv:iv,
        mode:CryptoJS.mode.ECB, // AES加密模式
        padding:CryptoJS.pad.Pkcs7 // 填充:  pkcs7 padding
    }).ciphertext.toString(); // 输出字符 hex
    return encrypted;
}

//  解密方法
//  data：要解密的字符串
//  key：加密因子
//  iv：偏移量
function decrypt(data) {

   var key = "._^BV67nW6ck8fwg";
   var iv = "";

    var key  = CryptoJS.enc.Utf8.parse(key); // 加密因子
    var iv   = CryptoJS.enc.Utf8.parse(iv); // 偏移量
    const encryptedHexStr = CryptoJS.enc.Hex.parse(data);
    const str = CryptoJS.enc.Base64.stringify(encryptedHexStr) ;
    const decrypted = CryptoJS.AES.decrypt(str, key, 
    {
        iv:iv,
        mode:CryptoJS.mode.ECB, // AES加密模式
        padding:CryptoJS.pad.Pkcs7 // 填充:  pkcs7 paddin
    });
    return decrypted.toString(CryptoJS.enc.Utf8).toString();
}



</script>
</head>
<body>
    <h1>AES加解密测试</h1>
    AES128，ECB模式，Pkcs7,iv为空,输出hex，utf8
    <br>
    <input id="plain" type="text" style="width:500px; height:20px;"/>
        <button type="button" onclick="encryptText()">加密</button>
    <input id="encrypted" type="text" style="width:500px; height:20px;" />
    <br>
    <br>
    <br>
    <input id="todecrypt" type="text" style="width:500px; height:20px;"/>
        <button type="button" onclick="decryptText()">解密</button>
    <input id="decrypted" type="text" style="width:500px; height:20px;" />
</body>
</html>